<template>
	<view class="container">
		<view class="card-box" style="padding: 30upx 20upx;">
			<view class="sender-box">
				<view style="width:80upx">
					<view class="sender-text">
						寄
					</view>
				</view>
				<view style="padding-bottom: 30upx;border-bottom: 1px solid #edf0f9;width: calc(100% - 80upx);display: flex;flex-direction: row;justify-content: space-between;">
					<view v-if="!senderName" style="color:#a9aaac;line-height: 50upx;">
						请在地址簿中选择寄件人信息
					</view>
					<view v-else>
						<view style="display: flex;flex-direction: row;">
							<view style="font-weight: bold;font-size: 16px;line-height: 16px;">{{senderName}}</view>
							<view style="margin-left: 10upx;font-size: 12px;line-height: 16px;">{{senderPhone}}</view>
						</view>
						<view style="color:#82848A;margin-top: 10upx;font-size: 12px;">{{senderAddress}}</view>
					</view>
					<view class="address-manager" @click="navToAddress(0)">地址簿</view>
				</view>

			</view>
			<view class="receiver-box">
				<view style="width:80upx">
					<view class="receiver-text">
						收
					</view>
				</view>
				<view style="padding-bottom: 30upx;border-bottom: 1px solid #edf0f9;width: calc(100% - 80upx);display: flex;flex-direction: row;justify-content: space-between;">
					<view v-if="!receiverName" style="color:#a9aaac;line-height: 50upx;">
						请在地址簿中选择收件人信息
					</view>
					<view v-else>
						<view style="display: flex;flex-direction: row;">
							<view style="font-weight: bold;font-size: 16px;line-height: 16px;">{{receiverName}}</view>
							<view style="margin-left: 10upx;font-size: 12px;line-height: 16px;">{{receiverPhone}}</view>
						</view>
						<view style="color:#82848A;margin-top: 10upx;font-size: 12px;">{{receiverAddress}}</view>
					</view>
					<view class="address-manager" @click="navToAddress(1)">地址簿</view>
				</view>
			</view>
		</view>
		<view class="card-box" style="margin-top: 20upx;">
			<view class="group_item">
				<view class="group_title">
					<span style="color: red;">*</span>预约时间
				</view>
				<uni-datetime-picker :hide-second="true" :start="startTime" :end="endTime" v-model="appointTime" class="picker_class"
				 @change="timeChange" style="color:#82848A;text-align: right;">{{appointTime || "请选择日期"}}</uni-datetime-picker>
				<uni-icons type="forward" size="14" style="line-height: 100upx;"></uni-icons>
			</view>
			<view class="group_item">
				<view class="group_title">
					<span style="color: red;">*</span>快递方式
				</view>
				<picker mode="selector" :value="expressTypeValue" :range="expressTypeList" @change="bindTypeChange" range-key="label"
				 class="picker_class">
					<view style="width: 100%;text-align: right;">{{expressTypeName || '请选择'}}</view>
				</picker>
				<uni-icons type="forward" size="14" style="line-height: 100upx;"></uni-icons>
			</view>
			<view class="group_last">
				<view class="group_title">
					<span style="color: red;">*</span>付款方式
				</view>
				<view class="picker_class" style="color:#82848A;text-align: right;">寄付现结</view>
				<uni-icons type="forward" size="14" style="line-height: 100upx;"></uni-icons>
			</view>
		</view>
		<view class="card-box" style="margin-top: 20upx;">
			<view style="border-bottom: 1px solid #edf0f9;padding-bottom: 20upx;">
				<view class="group_last">
					<view class="group_title">
						<span style="color: red;">*</span>物品名称
					</view>
					<view class="picker_class" style="color:#82848A;text-align: right;" @click="openAgreementPopup">了解禁寄物品</view>
					<uni-icons type="forward" size="14" style="line-height: 100upx;"></uni-icons>
				</view>
				<view style="display: flex;flex-direction: row;justify-content: space-between;flex-wrap: wrap;">
					<view class="goods-name-item" :class="nameIndex == nameActiveIndex?'name-active':''" v-for="(nameItem,nameIndex) in nameList"
					 :key="nameIndex" @click="changeName(nameItem,nameIndex)">
						{{nameItem}}
					</view>
				</view>
				<view style="margin-top: 20upx;" v-if="showCustomInput">
					<view style="padding-left: 10upx;">自定义<span style="color:#8f9298;font-size: 24upx;">（更多物品类型，请使用自定义）</span></view>
					<view style="margin-top: 20upx;">
						<input type="text" v-model="goodsName" placeholder="请输入物品名称(限10个字)" class="name-input" @input="nameInput" />
					</view>
				</view>
			</view>
			<view class="group_last">
				<view class="group_title">
					<span style="color: red;">*</span>物品重量
				</view>
				<view class="number-picker">
					<view class="reduce-box" @click="managerWeight(-1)">-</view>
					<view style="width: 120upx;">{{goodsWeight}}</view>
					<view style="width: 40upx;">kg</view>
					<view class="plus-box" @click="managerWeight(1)">+</view>
				</view>
			</view>
		</view>
		<view style="height: 180upx;"></view>
		<view class="detail-box">
			<view class="price-container">
				<view class="price-box">
					<view>预估价格:</view>
					<view>￥{{expressFee?expressFee+"元" : "--"}}</view>
				</view>
				<view style="font-size: 20upx;color:#8f9298;margin-top: 10upx;">
					以下为官方报价估算，具体价格以快递员核算为准
				</view>
			</view>
			<view>
				<view class="button-class" @click="placeAnOrder" :style="buttonStyle">下单</view>
			</view>
		</view>
		<uni-popup ref="agreementPopup" type="bottom" background-color="#fff">
			<view style="background-color: white;padding:20upx;border-top-left-radius: 20upx;border-top-right-radius: 20upx;">
				<view style="display: flex;flex-direction: row;justify-content: space-between;height: 60upx;line-height: 60upx;">
					<view style="font-size: 34upx;font-weight: bold;">禁止寄递物品目录</view>
					<view>
						<uni-icons type="closeempty" size="14" @click="closePopup"></uni-icons>
					</view>
				</view>
				<view style="font-size: 24upx;letter-spacing: 3upx;height: 800upx;overflow-y: scroll;">
					<view class="title">一、国家机关公文</view>
					<view>国家机关基于公务活动而制作的具有特定文体和格式，并加盖国家机关公章的书面材料。</view>
					<view class="title">二、国家保护野生动物、濒危野生动物及其制品</view>
					<view>如象牙、虎骨、犀牛角及其制品等。</view>
					<view class="title">三、侵犯知识产权和假冒伪劣、无证经营物品</view>
					<view>1.侵犯知识产权：如侵犯专利权、商标权、著作权的图书、音像制品等。</view>
					<view>2.假冒伪劣：如侵假冒伪劣的食品、药品、儿童用品、电子产品、化妆品、纺织品等。</view>
					<view>3.无证经营：未取得食品生产经营许可等资质证件而生产的物品等。</view>
					<view class="title">四、非法伪造物品</view>
					<view>如伪造或者变造的货币、证件、公章、发票等。</view>
					<view class="title">五、枪支（含仿制品、主要零部件）弹药</view>
					<view>1.枪支（含仿制品、主要零部件）：如手枪、步枪、冲锋枪、防暴枪、气枪、猎枪、运动枪、麻醉注射枪、钢珠枪、催泪枪等。</view>
					<view>2.弹药（含仿制品）：如子弹、炸弹、手榴弹、火箭弹、照明弹、燃烧弹、烟幕（雾）弹、信号弹、催泪弹、毒气弹、地雷、手雷、炮弹、火药等。</view>
					<view class="title">六、管制器具</view>
					<view>1.管制刀具：如匕首、三棱刮刀、带有自锁装置的弹簧刀（跳刀）、其他类似的单刃、双刃、三棱尖刀等。</view>
					<view>2.其他：如弩、催泪器、催泪枪、电击器等。</view>
					<view class="title">七、爆炸物品</view>
					<view>1.爆破器材：如炸药、雷管、导火索、导爆索、爆破剂等。</view>
					<view>2.烟花爆竹：如烟花、鞭炮、摔炮、拉炮、砸炮、彩药弹等烟花爆竹及黑火药、烟火药、发令纸、引火线等。</view>
					<view>3.其他：如推进剂、发射药、硝化棉、电点火头等。</view>
					<view class="title">八、压缩及液化气体及其容器</view>
					<view>1.易燃气体：如氢气、甲烷、乙烷、丁烷、天然气、液化石油气、乙烯、乙炔、打火机等。</view>
					<view>2.有毒气体：如一氧化碳、一氧化氮、氯气等。</view>
					<view>3.易爆或者窒息、助燃气体：如压缩氧气、氮气、氦气、氖气、气雾剂等。</view>
					<view class="title">九、易燃液体</view>
					<view>如汽油、柴油、煤油、桐油、丙酮、乙醚、油漆、生漆、苯、酒精、松香油等。</view>
					<view class="title">十、易燃固体、自燃物质、遇水易燃物质</view>
					<view>1.易燃固体：如红磷、硫磺、铝粉、闪光粉、固体酒精、火柴、活性炭等。</view>
					<view>2.自燃物质：如黄磷、白磷、硝化纤维（含胶片）、钛粉等。</view>
					<view>3.遇水易燃物质：如金属钠、钾、锂、锌粉、镁粉、碳化钙（电石）、氰化钠、氰化钾等。</view>
					<view class="title">十一、氧化剂和过氧化物</view>
					<view>如高锰酸钾、高炉酸盐、氧化氢、过氧化钠、过氧化钾、过氧化铅、氯酸盐、溴盐酸、硝酸盐、双氧水等。</view>
					<view class="title">十二、毒性物质</view>
					<view>如砷、砒霜、汞化物、铊化物、氰化物、硒粉、苯酚、汞、剧毒农药等。</view>
					<view class="title">十三、生化制品、传染性、感染性物质</view>
					<view>如病菌、炭疽、寄生虫、排泄物、医疗废弃物、尸骨、动物器官、肢体、未经硝制的兽皮、未经药制的兽骨等。</view>
					<view class="title">十四、放射性物质</view>
					<view>如铀、钴、镭、钚等。</view>
					<view class="title">十五、腐蚀性物质</view>
					<view>如硫酸、硝酸、盐酸、蓄电池、氢氧化钠、氢氧化钾等。</view>
					<view class="title">十六、毒品及吸毒工具、非正当用途麻醉药品和精神药品、非正当用途的易制毒化学品</view>
					<view>1.毒品、麻醉药品和精神药品：如鸦片（包括罂粟壳、花、苞、叶）、吗啡、海洛因、可卡因、大麻、甲基苯丙胺（冰毒）、氯胺酮、甲卡西酮、苯丙胺、安钠咖等。</view>
					<view>2.易制毒化学品：如胡椒醛、黄樟素、黄樟油、麻黄素、伪麻黄素、羟亚胺、邻酮、苯乙酸、溴代苯丙酮、醋酸铅、甲苯、丙酮等。</view>
					<view>2.吸毒工具：如冰壶等。</view>
					<view class="title">十七、非法出版物、印刷品、音像制品等宣传品</view>
					<view>如含有反动、煽动民族仇恨、破坏国家统一、破坏社会稳定、宣扬邪教、宗教极端思想、淫秽等内容的图书、刊物、图片、照片、音像制品等。</view>
					<view class="title">十八、间谍专用器材</view>
					<view>如暗藏式窃听器材、窃照器材、突发式收发报机、一次性密码本、密写工具、用于获取情报的电子监听截收器材等。</view>
					<view class="title">十九、非法伪造物品</view>
					<view>如伪造或者变造的货币、证件、公章等。</view>
					<view class="title">二十、禁止进出境物品</view>
					<view>如有碍人畜健康的、来自疫区的以及其他能传播疾病的食品、药品或者其他物品；内容涉及国家秘密的文件、资料及其他物品，以及收件地址在国外、港澳台地区禁止入境的物品。</view>
					<view class="title">二十一、其他物品</view>
					<view>《危险化学品目录》《民用爆炸物品品名表》《易制爆危险化学品目录》《易制毒化学品的分类和品种目录》《中华人民共和国禁止进出境物品表》载明的物品和《人间传染的病原微生物名录》载明的第一、二类病原微生物等，以及法律、行政法规、国务院和国务院有关部门规定禁止寄递的其他物品。
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniDateTimePicker from '@/components/uni-datetime-picker/uni-datetime-picker.vue'
	export default {
		data() {
			return {
				nameList: [
					"文件", "电子类产品", "生活用品", "服饰", "生鲜", "食品", "易碎品", "化妆品", "其他"
				],
				showCustomInput: false,
				goodsName: "",
				goodsWeight: 1,
				appointTime: "",
				startTime: "",
				endTime: "",
				nameActiveIndex: 99,
				senderName: "",
				senderPhone: "",
				senderAddress: "",
				receiverName: "",
				receiverPhone: "",
				receiverAddress: "",
				addressType: 0,
				expressTypeList: [{
					"label": "顺丰快递",
					"value": "SHUNFENG"
				}, {
					"label": "圆通快递",
					"value": "YUANTONG"
				}],
				expressTypeName: "",
				expressTypeValue: "",
				senderAddressInfo: {
					province: "",
					city: "",
					district: "",
					address: ""
				},
				receiverAddressInfo: {
					province: "",
					city: "",
					district: "",
					address: ""
				},
				expressFee: "",
				expressDisabled: true,
				userId: uni.getStorageSync("userInfo").userUuid,
				areaCode: this.$api.request.communityCode,
				buttonStyle: "background:#606266"
			}
		},
		components: {
			uniDateTimePicker
		},
		onLoad() {
			this.startTime = new Date().getTime()
			this.endTime = this.startTime + 3600 * 24 * 1000
		},
		methods: {
			closePopup() {
				this.$refs.agreementPopup.close()
			},
			changeName(name, index) {
				if (name == "其他") {
					this.goodsName = ""
					this.showCustomInput = true
				} else {
					this.goodsName = name
					this.showCustomInput = false
				}
				this.nameActiveIndex = index;
				let checkResult = this.checkExpressInfo()
				if (checkResult) {
					this.queryExpressPrice()
					this.expressDisabled = false;
					this.buttonStyle = "background:#ffaa00"
				} else {
					this.expressDisabled = true;
					this.buttonStyle = "background:#606266"
				}
			},
			nameInput(value) {
				if (this.goodsName) {
					let checkResult = this.checkExpressInfo()
					if(checkResult){
						this.expressDisabled = false;
						this.buttonStyle = "background:#ffaa00"
						if(!this.expressFee){
							this.queryExpressPrice()
						}
					}
			
				
				} else {
					this.expressDisabled = true;
					this.buttonStyle = "background:#606266"
				}
			},
			openAgreementPopup() {
				this.$refs.agreementPopup.open('bottom')
			},
			managerWeight(number) {
				if (this.goodsWeight == 1 && number < 0) {
					this.$api.msg("已是最小值")
					return;
				}
				this.goodsWeight += number;
				let checkResult = this.checkExpressInfo()
				if (checkResult) {
					this.queryExpressPrice()
					this.expressDisabled = false;
					this.buttonStyle = "background:#ffaa00"
				} else {
					this.expressDisabled = true;
					this.buttonStyle = "background:#606266"
				}
			},
			navToAddress(type) {
				this.addressType = type;
				uni.navigateTo({
					url: "./expressAddress?addressType=" + type
				})
			},
			queryExpressPrice() {
				let params = {
					expressType: this.expressTypeValue,
					businessType: "2",
					weight: this.goodsWeight,
					consignedTime: this.appointTime,
					distAddress: this.senderAddressInfo,
					srcAddress: this.receiverAddressInfo
				}
				this.$api.request.queryExpressPrice(params, (res) => {
					if (res.code == 200) {
						this.expressFee = res.data[0].fee
					} else {
						this.$api.msg("查询失败")
					}
				})
			},
			bindTypeChange(e) {
				this.expressTypeName = this.expressTypeList[e.detail.value].label
				this.expressTypeValue = this.expressTypeList[e.detail.value].value
				let checkResult = this.checkExpressInfo()
				if (checkResult) {
					this.queryExpressPrice()
					this.expressDisabled = false;
					this.buttonStyle = "background:#ffaa00"
				} else {
					this.expressDisabled = true;
					this.buttonStyle = "background:#606266"
				}

			},
			timeChange() {
				let checkResult = this.checkExpressInfo()
				if (checkResult) {
					this.queryExpressPrice()
					this.expressDisabled = false;
					this.buttonStyle = "background:#ffaa00"
				} else {
					this.expressDisabled = true;
					this.buttonStyle = "background:#606266"
				}
			},
			checkExpressInfo() {
				console.log(this.goodsName)
				if (!this.senderName) {
					return false
				} else if (!this.senderPhone) {
					return false
				} else if (!this.senderAddress) {
					return false
				} else if (!this.receiverName) {
					return false
				} else if (!this.receiverPhone) {
					return false
				} else if (!this.receiverAddress) {
					return false
				} else if (!this.goodsName) {
					return false
				} else if (!this.appointTime) {
					return false
				} else if (!this.expressTypeValue) {
					return false
				} else if (!this.goodsWeight) {
					return false
				}
				return true

			},
			loadUserAddress(address) {
				if (address.addressType == 0) {
					this.senderName = address.realName
					this.senderPhone = address.userPhone
					this.senderAddress = address.province + address.city + address.county + address.address
					this.senderAddressInfo = {
						province: address.province,
						city: address.city,
						district: address.county,
						address: address.address
					}
				} else if (address.addressType == 1) {
					this.receiverName = address.realName
					this.receiverPhone = address.userPhone
					this.receiverAddress = address.province + address.city + address.county + address.address
					this.receiverAddressInfo = {
						province: address.province,
						city: address.city,
						district: address.county,
						address: address.address
					}
				}
				let checkResult = this.checkExpressInfo()
				if (checkResult) {
					this.queryExpressPrice()
					this.expressDisabled = false;
					this.buttonStyle = "background:#ffaa00"
				} else {
					this.expressDisabled = true;
					this.buttonStyle = "background:#606266"
				}
			},
			// 下单
			placeAnOrder() {
				if (this.expressDisabled) {
					return
				}
				let params = {
					expressType: this.expressTypeValue,
					userId: this.userId,
					cargoDetails: [{
						name: this.goodsName,
						count: "1",
						weight: this.goodsWeight,
						currency: "CNY"
					}],
					contactInfoList: [{
						contactType: 1,
						contact: this.senderName,
						tel: this.senderPhone,
						province: this.senderAddressInfo.province,
						city: this.senderAddressInfo.city,
						county: this.senderAddressInfo.district,
						address: this.senderAddressInfo.address
					}, {
						contactType: 2,
						contact: this.receiverName,
						tel: this.receiverPhone,
						province: this.receiverAddressInfo.province,
						city: this.receiverAddressInfo.city,
						county: this.receiverAddressInfo.district,
						address: this.receiverAddressInfo.address
					}],
					startTime: this.appointTime,
					payMethod: "1",
					areaCode: this.areaCode,
					price: this.expressFee
				}
				this.$api.request.expressPlaceAnOrder(params, (res) => {
					if (res.code == 200) {
						this.$api.msg("下单成功")
						setTimeout(() => {
							uni.navigateBack()
						}, 1000)
					}
				})
			}
		}
	}
</script>

<style>
	page {
		background: #F8F8F8;
	}

	.container {
		padding: 20upx
	}

	.card-box {
		padding: 0 20upx;
		border-radius: 20upx;
		background-color: white;
	}

	.sender-box {
		display: flex;
		flex-direction: row;
	}

	.receiver-box {
		display: flex;
		flex-direction: row;
		margin-top: 30upx;
	}

	.group_item {
		width: 100%;
		display: flex;
		background: red;
		flex-direction: row;
		background-color: white;
		justify-content: space-between;
		border-bottom: 1px solid #edf0f9;
	}

	.group_last {
		width: 100%;
		display: flex;
		background: red;
		flex-direction: row;
		background-color: white;
		justify-content: space-between;
	}

	.group_title {
		/* width: 100upx; */
		height: 100upx;
		line-height: 100upx;
		font-size: 30upx;
		font-weight: bold;
	}

	.picker_class {
		width: 70%;
		height: 100upx;
		line-height: 100upx;
		margin-left: 10upx;
		font-size: 28upx;
		padding-left: 10upx;
	}

	.detail-box {
		position: fixed;
		background-color: white;
		bottom: 0;
		left: 0;
		height: 140upx;
		width: 100%;
		box-shadow: #afb3ba 0px 0px 10px 1px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.button-class {
		margin-top: 30upx;
		margin-right: 20upx;
		width: 240upx;
		height: 80upx;
		border-radius: 40upx;
		text-align: center;
		line-height: 80upx;
		color: white;
		font-size: 34upx;
	}

	.price-container {
		padding-left: 20upx;
		padding-top: 20upx;
	}

	.price-box {
		font-size: 30upx;
		font-weight: bolder;
		display: flex;
		flex-direction: row;
		line-height: 60upx;
	}

	.goods-name-item {
		background-color: #F8F8F8;
		width: 30%;
		height: 60upx;
		line-height: 60upx;
		text-align: center;
		border-radius: 30upx;
		margin-bottom: 20upx;
	}

	.name-input {
		height: 70upx;
		line-height: 70upx;
		font-size: 24upx;
		background-color: #F8F8F8;
		border-radius: 35upx;
		padding-left: 40upx;
	}

	.name-active {
		background-color: #FF9900;
	}

	.title {
		font-size: 30upx;
		font-weight: bold;
		line-height: 50upx;
		margin-top: 10upx;
	}

	.number-picker {
		color: #82848A;
		text-align: right;
		background-color: #F8F8F8;
		border-radius: 40upx;
		height: 80upx;
		margin-top: 10upx;
		line-height: 80upx;
		text-align: center;
		width: 70%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.reduce-box {
		width: 100upx;
		background-color: #eaedf5;
		font-weight: bold;
		border-bottom-left-radius: 40upx;
		border-top-left-radius: 40upx;
	}

	.plus-box {
		width: 100upx;
		background-color: #eaedf5;
		font-weight: bold;
		border-bottom-right-radius: 40upx;
		border-top-right-radius: 40upx;
	}

	.receiver-text {
		width: 50upx;
		height: 50upx;
		border-radius: 25upx;
		color: white;
		background-color: #ff5500;
		text-align: center;
		line-height: 50upx;
		font-size: 12px;
	}

	.sender-text {
		width: 50upx;
		height: 50upx;
		border-radius: 25upx;
		color: white;
		background-color: #000000;
		text-align: center;
		line-height: 50upx;
		font-size: 12px;
	}

	.address-manager {
		font-size: 12px;
		font-weight: bold;
		width: 100upx;
		text-align: right;
		height: 40upx;
		line-height: 40upx;
		border-left: 1px solid #dbdee7;
		margin: auto 0;
	}
</style>
